import React, { Component } from 'react'
import Com from './Com'
import Coms from './Coms'
import axios from 'axios'

export default class Life extends Component {
    // constructor() {
    //     super()
    //     console.log('我是实例期的第一个生命周期--constructor')
    //     // debugger
    // }
    state = {
        list: [],
        count: 10,
        flag: true
    }
    // 组件  将要  挂载
    // componentWillMount() {
    //     console.log('我是实例期的第二个生命周期--componentWillMount')
    //     // debugger
    // }
    add = () => {
        this.setState({
            count: this.state.count += 1
        })
    }
    render() {
        const { list, count, flag } = this.state
        console.log('我是父组件的render')
        // console.log('我是实例期的第三个生命周期--render')
        // console.log('我是存在期的第三个生命周期--render')
        const com = flag?  <Coms/>: ""
        return (
            <div>
                <h3>生命周期</h3>
                {/* <h5>
                    { count }
                </h5> */}
                {/* 销毁器 */}
                <button onClick={() => {
                    this.setState({
                        flag: !this.state.flag
                    })
                }}>change</button>
                { com }
                
                {/* <button onClick={ this.add }>+++</button>
                <Com count = { count }/> */}
                {/* <ul>
                    {
                        list.map(item => {
                            return <li key = { item.goods_id }>
                                { item.image_src}
                            </li>
                        })
                    }
                </ul> */}
            </div>
        )
    }
    // 组件  完成  挂载
    componentDidMount() {
        // axios.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata').then(res => {
        //     this.setState({
        //         list: res.data.message
        //     })
        // })
    }


    // state进行修改
    // 应该 组件 更新
    shouldComponentUpdate(props, { count }) {
        // if (count > 15) {
        //     return false
        // } else {
        //     return true
        // }
        // console.log('我是存在期的第一个生命周期--shouldComponentUpdate')
        return true
    }

    // 组件将要更新
    componentWillUpdate(props, state) {
        // console.log('我是存在期的第二个生命周期--componentWillUpdate')
    }

    // 
    componentDidUpdate() {
        // console.log('我是存在期的第四个生命周期--componentDidUpdate')
    }
}
